<template>
  <view class="container">
    <!-- 图片展示区 -->
    <view class="image-section">
      <image class="style-image" :src="imageUrl" mode="aspectFill"></image>
      <view class="style-tag">{{styleType}}</view>
    </view>
    
    <!-- 评分展示 -->
    <view class="score-section">
      <view class="score-card">
        <view class="score-title">毒舌鉴定指数</view>
        <view class="score-value">{{score}}</view>
        <view class="score-level">
          <text class="level-text">{{ styleTag }}</text>
          <text class="level-emoji">{{
            score > 4 ? '👑' :
            score == 4 ? '✨' :
            score >= 3 ? '💪' :
            '🆘'
          }}</text>
        </view>
        <view class="score-comment">{{
          score > 4 ? '惊艳！这身搭配我愿称之为艺术！' :
          score == 4 ? '不错哦，继续保持就是时尚博主啦～' :
          score == 3 ? 'emmm...勉强及格，还需努力！' :
          '亲，要不要考虑找个搭配师？'
        }}</view>
      </view>
    </view>
    
    <!-- AI评价 -->
    <view class="comment-section">
      <view class="comment-header">
        <view class="ai-avatar">
          <image src="/static/ai-avatar.png" mode="aspectFit"></image>
        </view>
        <view class="ai-info">
          <text class="ai-name">毒舌穿搭师</text>
          <text class="ai-title">专业点评官</text>
        </view>
      </view>
      <view class="comment-bubble">
        <text class="comment-text">{{aiComment}}</text>
      </view>
    </view>

    <!-- 分享按钮 -->
    <view class="action-section">
      <button class="action-btn share" @click="handleShare('wechat')">
        <text class="icon">🔗</text>
        <text>分享评价</text>
      </button>
      <button class="action-btn retry" @click="handleRetry">
        <text class="icon">📸</text>
        <text>重新上传</text>
      </button>
    </view>
    
    <!-- 解锁更多评论 -->
    <view class="unlock-section">
      <view class="unlock-header">
        <text class="unlock-icon">🔓</text>
        <text class="title">解锁更多毒舌评论</text>
        <text class="subtitle">付费1元或观看广告解锁本次额外点评</text>
      </view>
      <view class="unlock-options">
        <button class="unlock-btn pay" @click="handleUnlock('pay')">
          <text class="icon">💰</text>
          <text>付费解锁</text>
        </button>
        <button class="unlock-btn ad" @click="handleUnlock('ad')">
          <text class="icon">🎬</text>
          <text>看广告解锁</text>
        </button>
      </view>
    </view>
    
    <!-- VIP推广 -->
    <view class="vip-section">
      <view class="vip-badge">👑 VIP特权</view>
      <view class="vip-content">
        <view class="vip-benefits">
          <view class="benefit-item">
            <text class="icon">💎</text>
            <text>无限制毒舌评论</text>
          </view>
          <view class="benefit-item">
            <text class="icon">🚫</text>
            <text>免广告特权</text>
          </view>
          <view class="benefit-item">
            <text class="icon">🎨</text>
            <text>专属评论风格</text>
          </view>
        </view>
        <button class="vip-btn" @click="handleVip">立即开通 VIP</button>
      </view>
    </view>
  </view>
</template>

<script>
import * as DifyApi from '@/api/dify'
import Config from '@/core/config'

export default {
  data() {
    return {
      imageUrl: '/static/demo/good.jpg',
      styleType: '日系少女风',
      styleTag: '',
      score: 85,
      aiComment: '这身搭配充满了少女感，但配色上还可以再大胆一些。建议在细节处理上多下功夫，比如配饰的选择可以更加精致。整体来说是一个不错的尝试，继续保持！',
      loading: false,
      recordId: '',
      extraComment: '',
      isVip: false,
      unlocked: false
    }
  },
  onLoad(options) {
    if (options.recordId) {
      this.recordId = options.recordId
      this.getAnalysisResult()
    }
  },
  methods: {
    async getAnalysisResult() {
      try {
        this.loading = true
        const res = await DifyApi.getRecord({ recordId: this.recordId })
        if (res.code === 0 && res.data) {
          const { style, score, comment, file_url, tag } = res.data.record
          this.styleType = style
          this.score = score
          this.aiComment = comment
          this.styleTag = tag
          this.imageUrl = Config.get('resUrl') + file_url
        } else {
          uni.showToast({
            title: '获取分析结果失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取分析结果错误:', error)
        uni.showToast({
          title: '系统错误，请稍后重试',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    handleShare(platform) {
      uni.share({
        provider: platform,
        type: 0,
        title: '毒舌穿搭鉴定局',
        imageUrl: this.imageUrl,
        summary: `我的穿搭获得了${this.score}分！${this.aiComment}`,
        success: function (res) {
          console.log('分享成功:', res)
        },
        fail: function (err) {
          console.log('分享失败:', err)
          uni.showToast({
            title: '分享失败',
            icon: 'none'
          })
        }
      })
    },
    handleRetry() {
      uni.navigateBack()
    },
    async handleUnlock(type) {
      if (this.unlocked) {
        uni.showToast({
          title: '已经解锁额外评论',
          icon: 'none'
        })
        return
      }

      try {
        if (type === 'pay') {
          // 调用支付接口
          const payRes = await uni.requestPayment({
            provider: 'wxpay',
            orderInfo: {
              // 支付参数配置
            }
          })
          if (payRes.errMsg === 'requestPayment:ok') {
            this.unlocked = true
            this.getExtraComment()
          }
        } else {
          // 播放广告
          const videoAd = uni.createRewardedVideoAd({
            adUnitId: 'your-ad-unit-id'
          })
          videoAd.onLoad(() => console.log('广告加载成功'))
          videoAd.onError((err) => {
            console.log('广告加载失败:', err)
            uni.showToast({
              title: '广告加载失败',
              icon: 'none'
            })
          })
          videoAd.onClose((res) => {
            if (res && res.isEnded) {
              this.unlocked = true
              this.getExtraComment()
            } else {
              uni.showToast({
                title: '需要完整观看广告',
                icon: 'none'
              })
            }
          })
          videoAd.show()
        }
      } catch (error) {
        console.error('解锁失败:', error)
        uni.showToast({
          title: '解锁失败，请稍后重试',
          icon: 'none'
        })
      }
    },
    async getExtraComment() {
      try {
        const res = await DifyApi.getRecord({
          recordId: this.recordId,
          type: 'extra'
        })
        if (res.code === 0 && res.data) {
          this.extraComment = res.data.extraComment
        }
      } catch (error) {
        console.error('获取额外评论失败:', error)
      }
    },
    async handleVip() {
      if (this.isVip) {
        uni.showToast({
          title: '您已经是VIP会员',
          icon: 'none'
        })
        return
      }

      try {
        // 调用开通VIP接口
        const vipRes = await uni.requestPayment({
          provider: 'wxpay',
          orderInfo: {
            // VIP订单参数配置
          }
        })
        if (vipRes.errMsg === 'requestPayment:ok') {
          this.isVip = true
          uni.showToast({
            title: 'VIP开通成功',
            icon: 'success'
          })
        }
      } catch (error) {
        console.error('VIP开通失败:', error)
        uni.showToast({
          title: 'VIP开通失败，请稍后重试',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #F8F8F8;
  padding-bottom: 40rpx;
}

.image-section {
  position: relative;
  height: 600rpx;  // 减小高度
  overflow: hidden;
  margin: 30rpx;   // 添加外边距
  border-radius: 20rpx;  // 添加圆角
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);  // 添加阴影效果
  
  .style-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .style-tag {
    position: absolute;
    top: 30rpx;
    left: 30rpx;
    background: linear-gradient(135deg, #FF4785 0%, #FF7B8C 100%);
    color: #FFFFFF;
    padding: 12rpx 24rpx;
    border-radius: 30rpx;
    font-size: 26rpx;
    box-shadow: 0 4rpx 8rpx rgba(255, 71, 133, 0.3);
  }
}

.score-section {
  margin-top: 40rpx;  // 修改顶部间距
  padding: 0 40rpx;
  
  .score-card {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 40rpx;
    text-align: center;
    box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 6rpx;
      background: linear-gradient(to right,
        #FF4785 0%,
        #FF7B8C 25%,
        #4CD4C5 50%,
        #FF4785 75%,
        #FF7B8C 100%
      );
      background-size: 200% 100%;
      animation: shimmer 2s infinite linear;
    }
    
    .score-title {
      font-size: 32rpx;
      color: #333;
      margin-bottom: 20rpx;
      font-weight: bold;
    }
    
    .score-value {
      font-size: 120rpx;
      font-weight: bold;
      background: linear-gradient(135deg, #FF4785 0%, #FF7B8C 100%);
      -webkit-background-clip: text;
      color: transparent;
      line-height: 1;
      margin-bottom: 20rpx;
    }
    
    .score-level {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10rpx;
      margin-bottom: 20rpx;
      
      .level-text {
        font-size: 36rpx;
        font-weight: bold;
        background: linear-gradient(135deg, #FF4785 0%, #FF7B8C 100%);
        -webkit-background-clip: text;
        color: transparent;
      }
      
      .level-emoji {
        font-size: 40rpx;
        animation: bounce 1s infinite;
      }
    }
    
    .score-comment {
      font-size: 28rpx;
      color: #666;
      line-height: 1.4;
      padding: 20rpx;
      background: #FFF5F7;
      border-radius: 12rpx;
      margin-top: 20rpx;
    }
  }
}

.comment-section {
  margin: 30rpx;
  
  .comment-header {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    .ai-avatar {
      width: 80rpx;
      height: 80rpx;
      margin-right: 20rpx;
      
      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 4rpx solid #FF4785;
      }
    }
    
    .ai-info {
      .ai-name {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        display: block;
      }
      
      .ai-title {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
  
  .comment-bubble {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 30rpx;
    position: relative;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    
    &::before {
      content: '';
      position: absolute;
      top: -16rpx;
      left: 40rpx;
      border: 8rpx solid transparent;
      border-bottom-color: #FFFFFF;
    }
    
    .comment-text {
      font-size: 28rpx;
      color: #333;
      line-height: 1.6;
    }
  }
}

.action-section {
  display: flex;
  justify-content: center;
  gap: 30rpx;
  margin: 40rpx 30rpx;
  
  .action-btn {
    flex: 1;
    background: #FFFFFF;
    border: none;
    border-radius: 40rpx;
    padding: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    
    &.share {
      background: #FF4785;
      color: #FFFFFF;
    }
    
    &.retry {
      background: #4CD4C5;
      color: #FFFFFF;
    }
    
    .icon {
      font-size: 32rpx;
    }
    
    text {
      font-size: 28rpx;
    }
  }
}

.unlock-section {
  margin: 30rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .unlock-header {
    text-align: center;
    margin-bottom: 30rpx;
    
    .unlock-icon {
      font-size: 48rpx;
      margin-bottom: 20rpx;
      display: block;
    }
    
    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
      display: block;
    }
    
    .subtitle {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .unlock-options {
    display: flex;
    gap: 20rpx;
    
    .unlock-btn {
      flex: 1;
      border: none;
      border-radius: 40rpx;
      padding: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10rpx;
      
      &.pay {
        background: linear-gradient(135deg, #FF4785 0%, #FF7B8C 100%);
        color: #FFFFFF;
      }
      
      &.ad {
        background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);  // 更改为紫色渐变
        color: #FFFFFF;
      }
      
      .icon {
        font-size: 32rpx;
      }
      
      text {
        font-size: 28rpx;
      }
    }
  }
}

.vip-section {
  margin: 30rpx;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    // background: url('/static/vip-bg.png') no-repeat center/cover;
    opacity: 0.1;
  }
  
  .vip-badge {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    background: rgba(255, 255, 255, 0.2);
    padding: 8rpx 20rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
    color: #FFFFFF;
  }
  
  .vip-content {
    position: relative;
    z-index: 1;
    
    .vip-benefits {
      margin-bottom: 30rpx;
      
      .benefit-item {
        display: flex;
        align-items: center;
        gap: 16rpx;
        margin-bottom: 16rpx;
        
        .icon {
          font-size: 32rpx;
        }
        
        text {
          color: #FFFFFF;
          font-size: 28rpx;
        }
      }
    }
    
    .vip-btn {
      background: #FFFFFF;
      color: #FFA500;
      border: none;
      border-radius: 40rpx;
      font-size: 32rpx;
      font-weight: bold;
      padding: 20rpx;
      width: 100%;
      text-align: center;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    }
  }
}
</style>
